<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, user-scalable=no">
    <title>购物车</title>
    <link th:href="@{/css/mobile.css}" rel="stylesheet">
    <script type="text/javascript" th:src="@{/script/jquery-1.7.2.js}"></script>
    <script th:if="${session.userInfo}" type="text/javascript">
        var total = 0;
    </script>
    <style>
        .count-value {
            border: none;
            outline: none;
            position: absolute;
            padding: 0;
            margin: 0;
            right: calc(4vw + 5vh);
            top: 4vh;
            font-size: calc(8px + 2vh);
            text-align: center;
            width: 9vw;
            height: 4vh;
        }

        .btn-reduce {
            position: absolute;
            width: 4vh;
            height: 4vh;
            top: 4vh;
            right: calc(14vw + 6vh);
            border: none;
            background-color: #0066ff;
            color: white;
            border-radius: 28px;
            font-size: calc(8px + 2vh);
        }

        .btn-add {
            position: absolute;
            width: 4vh;
            height: 4vh;
            top: 4vh;
            right: 3vw;
            border: none;
            background-color: #0066ff;
            color: white;
            border-radius: 28px;
            font-size: calc(8px + 2vh);
        }
    </style>
</head>
<body>
<div style="position: relative;width: 100%;height: 8vh;left: 0"></div>

<section th:if="${session.userInfo}!=null">
    <div th:each="item:${cart}" th:id=" ${item.getFid}+'box' " class="list-box" style="height: 12vh;">
        <div class="right-text-box">
            <p th:text="${item.getFname()}"></p>
            <br>
            <p th:text=" '单价:' + ${item.getPrice()}"></p>
        </div>
        <input class="count-value" readonly th:id=" ${item.getFid}+'count' " th:value="${item.getCount}">
        <button th:onclick="reduceItem([[${item.getFid()}]],[[${item.getPrice}]])" th:foodId="${item.getFid()}"
                class="btn-reduce" th:text="'-'">
        </button>
        <button th:onclick="addItem([[${item.getFid()}]],[[${item.getPrice}]])" th:foodId="${item.getFid()}"
                class="btn-add" th:text="'+'">
        </button>
        <script>
            total += [[${item.getPrice}]]*[[${item.getCount}]];
        </script>
    </div>
    <div style="position: fixed; bottom: 0.5vh; width: 100%; height: 9vh; background-color: white; left: 0;
    box-shadow: 0 -1px 1px #bbbbbb;">
        <div style="position: absolute;bottom: 1.5vh;left: 2vw;width: 30vw;
        height: 6vh;background-color: #ffffff;">
            <div th:if="${cart}" style="position: absolute; left: calc(14px + 2vw); top: 50%; transform: translate(-0%, -50%);
            text-align: center; color: #000000; font-size: calc(8px + 2vh)">
                <p style="display: contents">总价:</p>
                <p style="display: contents" id="cart-total"></p>
                <script>
                    document.getElementById("cart-total").innerText = total;
                </script>
            </div>
        </div>

        <div th:if="${cart}" class="btn-inCart" style="width: 21vw;height: 7vh;top: 1vh">
            <p class="center-text" style="font-size: calc(8px + 1.1vh)">结算</p>
            <a th:href="@{/toOrder(uid=${session.userInfo.getId()})}" target="_parent"
               style="position: absolute;width: 100%;height: 100%"></a>
        </div>
        <p th:if="${cart}==null" class="center-text">当前购物车为空!</p>
    </div>
    <div style="position:relative;width: 100%;height: 10vh"></div>
</section>
<section th:if="${session.userInfo} == null">
    <p>您还未登录!请先登录</p>
</section>
</body>
<script th:if="${session.userInfo}">
    function addItem(fid,price) {
        let count = document.getElementById(fid + 'count').value;
        document.getElementById(fid + 'count').value = 1*count + 1;
        let to_tal = document.getElementById("cart-total").innerText;
        document.getElementById("cart-total").innerText = 1*to_tal + price*1;
        $.getJSON("/addCount", "action=addCount&foodId=" + fid +
            "&userId=" + [[${session.userInfo.getId()}]]);
    }

    function reduceItem(fid,price) {
        let count = document.getElementById(fid + 'count').value;
        document.getElementById(fid + 'count').value = 1*count - 1;
        let to_tal = document.getElementById("cart-total").innerText;
        document.getElementById("cart-total").innerText = 1*to_tal - price*1;
        if (count == 1) {
            document.getElementById(fid + 'box').remove();
        }
        $.getJSON("/reduceCount", "action=reduceCount&foodId=" + fid +
            "&userId=" + [[${session.userInfo.getId()}]]);
    }
</script>
</html>